<section class="section">
  <h2>Images</h2>
  <section>
    <h3>Img</h3>
    <img src="./static/person.png" alt="Cartoon" />
    <details class="demo">
      <summary>View code</summary>
      <pre><code>&lt;img src="./static/person.png" alt="Cartoon" /&gt;</code></pre>
    </details>
  </section>
  <section>
    <h3>Figure &amp; Figcaption</h3>
    <figure>
      <img src="./static/person.png" alt="Cartoon" />
      <figcaption>Picture of a person</figcaption>
    </figure>
    <details class="demo">
      <summary>View code</summary>
      <pre><code>&lt;figure&gt;
  &lt;img src="./static/person.png" alt="Cartoon" /&gt;
  &lt;figcaption&gt;Picture of a person&lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
    </details>
  </section>
  <section>
    <h3>SVG</h3>
    <svg width="200" height="200" viewBox="0 0 100 100">
      <path d="M0,0 100,100 M100,0 0,100" stroke="blue" stroke-width="5" fill="none" />
      <circle cx="50" cy="50" r="30" stroke="red" stroke-width="5" fill="none" />
    </svg>
    <details class="demo">
      <summary>View code</summary>
      <pre><code>&lt;svg width="200" height="200" viewBox="0 0 100 100"&gt;
  &lt;path d="M0,0 100,100 M100,0 0,100" stroke="blue" stroke-width="5" fill="none" /&gt;
  &lt;circle cx="50" cy="50" r="30" stroke="red" stroke-width="5" fill="none" /&gt;
&lt;/svg&gt;</code></pre>
    </details>
  </section>
</section>